<template>
    <view class="wrap tabBar-height">
        <view class="btn-item" v-if="shopCart" @click="goShopCart">
            <view class="cu-tag badge1" v-if="cartnum > 0">
                {{ cartnum }}
            </view>
            <image :src="imageURL + 'common/shopCart.png'"></image>

            <view class="num f-22" v-if="num > 0">{{ num > 99 ? ".." : num }}</view>
        </view>

        <button class="btn-item" @click="showPop" v-if="costomer">
            <image :src="imageURL + 'common/customer.png'"></image>
        </button>

        <view class="btn-item" v-if="showTop" @click.stop="onTop">
            <image :src="imageURL + 'common/goTop.png'"></image>
        </view>
        <view class="tanchu" v-if="show">
            <view class="tanchu_item1">
                <view class="ewm">
                    <view class="" v-for="(item1, index) in kefu.kefu_images" :key="index">
                        <image
                            style="width: 250rpx; height: 250rpx; display: inline-block"
                            :show-menu-by-longpress="true"
                            @longtap="handleLongTap"
                            :src="$showImg(item1)"
                            mode=""
                        >
                        </image>
                    </view>
                </view>
                <view class="tishi"> 长按识别二维码添加客服 </view>
            </view>
            <view class="tanchu_item2">
                <view class="call_kefu" style=""> 联系客服 </view>
                <textarea
                    class="tips_kf"
                    v-model="kefu.kefu_tips"
                    name=""
                    id=""
                    cols="30"
                    rows="40"
                >
					<!-- 请在工作时间内致电客服周一~周五早8:00-晚6:00 -->
				</textarea
                >
                <view
                    @click="call()"
                    style="
                        width: 220rpx;
                        height: 80rpx;
                        background: linear-gradient(90deg, #00a67a, #057748);
                        border-radius: 40rpx;
                        color: #fff;
                        line-height: 80rpx;
                    "
                >
                    立即致电</view
                >
            </view>
            <view class="tanchu_item3">
                <image
                    @click="show = false"
                    style="width: 60rpx; height: 150rpx; font-size: 100% 100%"
                    src="https://same.ascetic.top/static/shopping/gb1.png"
                    mode=""
                ></image>
            </view>
        </view>
    </view>
</template>

<script>
import { imageURL } from "@/utils/config.js";

export default {
    props: {
        showTop: {
            type: Boolean,
            default: false,
        },
        shopCart: {
            type: Boolean,
            default: false,
        },
        kefu: {
            type: Object,
            default: {},
        },
        costomer: {
            type: Boolean,
            default: false,
        },
        cartnum: {
            type: Number,
            default: 0,
        },
        showItIndex: {
            type: Number,
            default: 0,
        }
    },
    onLoad() {},
    data() {
        return {
            imageURL,
            num: 0,
            isShowCart: false,
            show: false,
            kefus: {
                kefu_images: [
                    {
                        item: "static/shopping/kfbg.png",
                    },
                    {
                        item: "static/shopping/kfbg.png",
                    },
                ],
            },
        };
    },
    /**
     * 监听
     */
    watch: {
        showItIndex: {
            handler(val) {
                this.show =  false;
            },
            immediate: true,
        }
    },
    /**
     * 加载
     */
    onShow() {
        this.getCart();
    },
    /**
     * 方法
     */
    methods: {
        showPop() {
            this.show = true;
        },
        getCart() {
            this.$request.post("api/wanlshop.cart/synchro", { cart: [] }).then((res) => {
                this.cartnum = res.data.length;
                uni.setStorageSync("cartnum", this.cartnum);
            });
        },
        handleLongTap(e) {
            // 使用预览图片的方法，微信小程序环境会自动处理长按识别二维码
            uni.previewImage({
                urls: [e.currentTarget.dataset.src], // 图片链接列表，这里假设你已将图片源绑定到data-src上
                current: e.currentTarget.dataset.src, // 当前显示图片的链接
            });
        },
        call() {
            uni.makePhoneCall({
                phoneNumber: this.kefu.mobile, //仅为示例
            });
        },
        /**
         * 向上
         */
        onTop() {
            uni.pageScrollTo({
                scrollTop: 0,
            });
        },
        /**
         * 获取购物车数量接口
         */
        onGetShopCartNumData() {},

        /**
         * 跳转到购物车
         */
        goShopCart() {
            uni.navigateTo({
                url: "/yCreate/pages/shoppingCart",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
/deep/.u-mode-center-box {
    background-color: transparent !important;
    /* 设置为透明 */
}

.wrap {
    position: fixed;
    right: 25rpx;
    bottom: 0rpx;
    // width: 100rpx;
    // height: 300rpx;
    z-index: 888;
    overflow: hidden;

    .tanchu {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        overflow: hidden;
        height: 100vh;
        padding-top: 20vh;
        padding-left: 75rpx;
        // padding-bottom: 20vh;
        background-color: rgba(0, 0, 0, 0.5);

        .tanchu_item1 {
            width: 600rpx;
            text-align: center;
            height: 500rpx;
            background-image: url("https://same.ascetic.top/static/shopping/kfbg.png");
            background-size: 100% 100%;
            padding-top: 170rpx;
            margin-bottom: 30rpx;

            .ewm {
                width: 100%;
                display: flex;
                justify-content: space-around;
            }

            .tishi {
                height: 80rpx;
                line-height: 80rpx;
            }
        }

        .tanchu_item2 {
            width: 600rpx;
            text-align: center;
            background-color: #fff;
            border-radius: 16rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            padding: 30rpx 0;
            .call_kefu {
                font-weight: bold;
                font-size: 34rpx;
                color: #121212;
                height: 60rpx;
                line-height: 60rpx;
            }

            .tips_kf {
                width: 600rpx;
                height: 100rpx;
                line-height: 1.5;
            }
        }

        .tanchu_item3 {
            width: 600rpx;
            height: 150rpx;
            padding: 0 270rpx;
        }
    }

    .btn-item {
        width: 100rpx;
        height: 100rpx;
        position: relative;
        z-index: 889;

        > image {
            width: 100rpx;
            height: 100rpx;
        }

        .num {
            position: absolute;
            right: 7rpx;
            top: 6rpx;
            z-index: 890;
            width: 32rpx;
            height: 32rpx;
            border-radius: 50%;
            overflow: hidden;
            color: white;
            line-height: 32rpx;
            text-align: center;
            background-color: $price-color;
        }
    }
}
</style>
